<template>
  <van-popup
    :show="show"
    position="top"
    customStyle="border-radius: 0rpx 0rpx 20rpx 20rpx;max-height: 70%;"
    @close="close"
  >
    <view class="filter-wrapper">
      <slot></slot>
      <view class="button-wrapper">
        <view @click="reset" class="button button-reset">重置</view>
        <view @click="confirm" class="button button-confirm">确定</view>
      </view>
    </view>
  </van-popup>
</template>

<script setup>
const props = defineProps({
  // 是否显示面板
  show: Boolean,
  // 确定时是否关闭面板
  closeOnOk: {
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits(["reset", "confirm", "close"]);

// 重置
function reset() {
  emits("reset");
}

// 确定
function confirm() {
  emits("confirm");

  if (props.closeOnOk) {
    close();
  }
}

// 关闭
function close() {
  emits("close");
}
</script>

<style lang="scss" scoped>
.filter-wrapper {
  width: 690rpx;
  background: #ffffff;
  padding: 41rpx 30rpx 30rpx;

  .button-wrapper {
    display: flex;
    float: right;
    padding-bottom: 30rpx;
    margin-top: 40rpx;
    .button {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border: 2rpx solid #5769af;
      border-radius: 30rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #5769af;
      &-confirm {
        background: #5769af;
        color: #ffffff;
        margin-left: 40rpx;
      }
    }
  }
}
</style>
